<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>搜索图书</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style type="text/css">
		input[type=search] {
			border-radius: 0px;
			background-color: #FFFFFF;
			height: 40px;
			margin-bottom: 5px;
            width: 80%;
		}
        #do_search {
            width: 20%;
        }
        #none {
            text-align: center;
            padding-top: 10px;
            display: none;
        }
	</style>
</head>

<body>
	<div class="mui-input-row mui-search mui-active">
		<input type="search" class="mui-input-clear" placeholder="" id="search" name="words">
        <button type="button" class="mui-btn mui-mini mui-btn-danger" id="do_search">确定</button>
	</div>
	<div class="book_list">
		<ul class="mui-table-view">
	    </ul>
        <p class="mui-ellipsis" id="none">暂无相关图书</p>
    </div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $("button#do_search").click( function () {
            do_search();
        });
        document.onKeydown = function () {
            if (event.keyCode==13)
                do_search();
        }
        function do_search() {
            console.log('start search')
            words = $("input#search").val();
            if (words=='')
                return false;
            booklist = $('ul.mui-table-view');
            booklist.empty();
            imgurl = "{{ url('library:book_detail', args=(0, )) }}"
            $.ajax({
                url: "{{ url('library:search') }}",
				data: {
					words: words,
				},
                type: 'GET',
                dataType: 'json',
                success: function (books) {
                    if (books.length==0)
                        $("p#none").show()
                    else {
                        $("p#none").hide()
                        for (i=0; i<books.length; i++) {
                            booklist.append('<li class="mui-table-view-cell mui-media" >' +
                                    '<a href="' + imgurl.substr(0, imgurl.length-2) + books[i].id +  '">' +
                                    '<img class="mui-media-object mui-pull-left" src="' + books[i].cover + '">' +
                                    '<div class="mui-media-body">' +
                                    books[i].name +
                                    '<p class="mui-ellipsis">' + books[i].author + '</p>' +
                                    '<textarea disabled>' + books[i].content_introduction + '</textarea>' +
                                    '</div></a></li>');
                        }
                    }
                },
                error: function () {
                    console.log('error')
                }
            });
            console.log('end search')
        }
    </script>
</body>

</html>
